<template>
    <div>
        <el-card style="margin-bottom: 5px">
            <el-input style="width: 240px; margin-right: 10px" v-model="data.name" placeholder="请输入用户名进行查询"
                prefix-icon="Search"></el-input>
            <el-button type="primary" @click="load">查 询</el-button>
            <el-button type="warning" @click="reset">重 置</el-button>
        </el-card>

        <el-card style="margin-bottom: 5px">
            <el-table :data="data.list" style="width: 100%">
                <el-table-column prop="id" label="id" width="80" />
                <el-table-column prop="name" label="用户名称" width="180" />
                <el-table-column prop="sex" align="center" label="性别" width="80" />
                <el-table-column prop="creationTime" align="center" label="创建时间" width="220" show-overflow-tooltip>
                    <template #default="scope">
                        <span v-if="scope.row.creationTime">{{ maskUpdateDate(scope.row.creationTime) }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="modificationTime" align="center" label="修改时间" width="220" show-overflow-tooltip>
                    <template #default="scope">
                        <span v-if="scope.row.modificationTime">{{ maskUpdateDate(scope.row.modificationTime) }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="roleName" label="角色" show-overflow-tooltip />

                <el-table-column header-align="center" align="center" label="操作">
                    <template #default="{ row, $index }">
                        <el-button link type="primary" size="small" @click="editMenu(row)">编辑角色</el-button>
                        <el-button link type="danger" size="small">禁止</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-card>

        <div class="demo-pagination-block">
            <div style="margin-top: 15px"></div>
            <el-pagination @current-change="load" @size-change="load" v-model:current-page="data.pageNum"
                v-model:page-size="data.pageSize" :page-sizes="[8, 10, 12, 14]" background
                layout="total, sizes, prev, pager, next, jumper" :total="data.total" />
        </div>

        <!-- 修改dialog -->
        <el-dialog v-model="data.dialogFormVisible" title="菜单权限" width="500" :before-close="closeDdit">
            <el-select-v2 v-model="data.form.roleId" :options="data.options" placeholder="请选择"
                style="width: 240px" :fit-input-width="false">
            </el-select-v2>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="data.dialogFormVisible = false">取消</el-button>
                    <el-button type="primary" @click="makeSure">
                        确定
                    </el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>

<script setup>
import { editUserRole, getAllRoleInfo } from '@/api/menu';
import { getUserRoleList } from '@/api/UserRole';
import { ElMessage } from 'element-plus';
import { onMounted, reactive } from 'vue';


onMounted(() => {
    load()
})

const data = reactive({
    list: [],                   // 用户数据
    pageNum: 1,                 // 用户数据 --- 分页条件 --- 当前页码
    pageSize: 8,                // 用户数据 --- 分页条件 --- 每页显示数量
    name: '',                   // 用户数据 --- 查询条件 --- 用户名
    username: '',               // 用户数据 --- 查询条件 --- 账号
    dialogFormVisible: false,   // 用户数据 --- 修改弹窗 --- 显示隐藏
    role: [],                   // 用户数据 --- 修改弹窗 --- 角色列表
    options: [],
    form: {
        userId: '',
        roleId: ''
    }
})

//优化时间显示
const maskUpdateDate = (updateDateArray) => {
    if (!updateDateArray) return '';
    // 创建一个新的 Date 对象
    const date = new Date(
        updateDateArray[0],     // 年份
        updateDateArray[1] - 1, // 月份（JavaScript 中月份从 0 开始）
        updateDateArray[2],     // 日
        updateDateArray[3],     // 时
        updateDateArray[4],     // 分
        updateDateArray[5]      // 秒
    );
    // 将 Date 对象转换为字符串
    const dateString = date.toLocaleString('zh-CN', {
        year: 'numeric',
        month: '2-digit',
        day: '2-digit',
        hour: '2-digit',
        minute: '2-digit',
        second: '2-digit',
        hour12: false // 24小时制
    });
    return dateString;
}

const editMenu = async (row) => {
    data.dialogFormVisible = true
    const response = await getAllRoleInfo()
    data.role = response.data
    data.form.userId = row.id
    data.form.roleId = row.roleId
    initOptions()
}

// 初始化 --- 编辑选项
const initOptions = () => {
    data.options = data.role.map(role => ({
        value: role.roleId,
        label: role.roleName
    }))
}

const makeSure = async () => {
    data.dialogFormVisible = false
    const response = await editUserRole(data.form)
    if (response.code == '200') {
        ElMessage({
            type: 'success',
            message: '编辑成功',
        })
    } else {
        ElMessage({
            type: 'warning',
            message: response.msg,
        })
    }
    load()
}

const load = async () => {
    const response = await getUserRoleList(data.pageNum, data.pageSize, data.name, data.username)
    data.list = response.data.list
}

</script>

<style scoped>
* {
    padding: 10px;
}

.demo-pagination-block+.demo-pagination-block {
    margin-top: 10px;
}

.demo-pagination-block .demonstration {
    margin-bottom: 16px;
}
</style>